<template>
	<view>
		<view class="wrap">
			<view class="ml32 mr30">
				<!-- 1 -->
				<u-sticky>
					<view class=""><u-search placeholder="搜索" v-model="keyword" :showAction="false"></u-search></view>
				</u-sticky>
				<!-- 2 -->
				<view class="addPhoneFriend flex-column flex-cen mt32">
					<image src="/static/img/pages_contact/1402.svg" mode="" style="width: 24rpx;height: 44rpx;"></image>
					<view class="mt8 word">添加手机联系人</view>
				</view>
				<!-- 3 -->
				<view class="">
					<view class="title mt10">圈友验证</view>
					<u-empty v-if="!FriendApplyList[0]" mode="message"></u-empty>
					<!-- list -->
					<view class="mt32" v-for="item in FriendApplyList" :key="item.userId">
						<view class="" v-if="item.ustatus === '1'">
							<view class="wrap flex-between">
								<view class="left flex-cen">
									<view class=""><u-avatar class="" :src="item.userAvatar"></u-avatar></view>
								</view>
								<view class="right  flex-align flex-between ps22">
									<view class="">{{ item.userNick }}</view>
									<!-- 				{{ $u.timeFrom(item.updateTime, 'yyyy年mm月dd日') }} -->
									<view class="flex-align">
										<!-- 1 主动 -->
										<!-- 0 被动 -->
										<!-- ucomeFrom 1 ucomeFrom 2 ucomeFrom 3 -->
										<!-- (1手机号，2二维码，3圈子) -->
										<view class="word1 mr10" v-if="item.ucomeFrom === '1'">来源：手机号</view>
										<view class="word1 mr10" v-if="item.ucomeFrom === '2'">来源：二维码</view>
										<view class="word1 mr10" v-if="item.ucomeFrom === '3'">来源：圈子</view>
										<!-- <view class="" v-if="item.isActive === 1">申请中</view> -->
										<!-- <view class="" v-else>是否同意</view> -->
										<view class="flex-align">
											<u-button size="mini" @click="agreen(item.userId)">同意</u-button>
											<u-button size="mini" @click="refuse(item.userId)">拒绝</u-button>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			FriendApplyList: [],
			show: false,
			word: ''
		};
	},
	onShow() {
		this.getFriendApplyList();
	},
	methods: {
		async getFriendApplyList() {
			let re = await this.$API.friendApi.getFiendApplyList();
			this.FriendApplyList = re;
		},
		async agreen(id) {
			let re = await this.$API.friendApi.agreenFriendApply(id);
		},
		async refuse(id) {
			let re = await this.$API.friendApi.refuseFriendApply(id);
		}
	}
};
</script>

<style lang="scss">
.addPhoneFriend {
	width: 688rpx;
	height: 130rpx;
	background: #f1f1f1;
	border-radius: 26rpx 26rpx 26rpx 26rpx;
	opacity: 1;
}
.word {
	width: 168rpx;
	height: 34rpx;
	font-size: 24rpx;
	// font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #999999;
	// line-height: 0rpx;
	-webkit-background-clip: text;
	// -webkit-text-fill-color: transparent;
}
.word1 {
	width: 120rpx;
	height: 32rpx;
	font-size: 24rpx;
	// font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #959595;
	line-height: 44rpx;
	-webkit-background-clip: text;
	// -webkit-text-fill-color: transparent;
}
.right {
	width: 590rpx;
	border-bottom: 2rpx solid #fafafa;
}
.title {
	font-size: 36rpx;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #000000;
}
.btn {
	// width: 112rpx;
	// height: 60rpx;
	background: #ae51ff;
	border-radius: 8rpx 8rpx 8rpx 8rpx;
	opacity: 1;
	.word2 {
		width: 56rpx;
		height: 40rpx;
		font-size: 28rpx;
		// font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #ffffff;
		// line-height: 0rpx;
		-webkit-background-clip: text;
		// -webkit-text-fill-color: transparent;
	}
}
</style>
